<script lang="ts" setup>
import { getCurrentInstance, ref } from 'vue'
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent } from '@/hooks'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import { useSubPage } from './composables'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
const {
  navBarInfo,
  userInfo,
  loginHandle,
  navUserInfoPage,
  navCommonProblemPage,
  navMemberRightsPage,
  navOrderListPage,
  navbarInitFinishHandle,
} = useSubPage()
const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent('up', 80)
const gradeList = [
	{ name:'小学一年级',type:'1' },
	{ name:'小学二年级',type:'2' },
	{ name:'小学三年级',type:'3' },
	{ name:'小学四年级',type:'4' },
	{ name:'小学五年级',type:'5' },
	{ name:'小学六年级',type:'6' },
	{ name:'初中一年级',type:'7' },
	{ name:'初中二年级',type:'8' },
	{ name:'初中三年级',type:'9' },
]
const friend = [
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666880829035-assets/web-upload/af62059a-aa92-44c5-9e6f-2be519f3de32.jpeg',
    // https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666880572856-assets/web-upload/77f07f2b-404d-4c08-8264-f70b8be138f9.jpeg
    title: '英汉互译',
    appid: 'wxcd661761a9f2d61e',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666880878599-assets/web-upload/20429d4b-2776-445b-884a-78aa14901934.jpeg',
    title: '对话翻译',
    appid: 'wx7560d334dd837f70',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666880969854-assets/web-upload/95902944-1be6-4c23-a2f5-47cf78eda072.jpeg',
    title: '语音转文字',
    appid: 'wx2257f5c246ad1bcd',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1667656184223-assets/web-upload/cc3dbf5c-1483-4c74-83fc-03c2bd7c373e.jpeg',
    title: '标准发音',
    appid: 'wx86cc21f2f7fa3efa',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666881024970-assets/web-upload/ce66dc47-d34f-499b-ab19-8253d5115f2c.jpeg',
    title: '文本翻译',
    appid: 'wx59376c14388a2165',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1679214581056-assets/web-upload/49298d50-78e1-4466-a01c-e3b4249adebb.jpeg',
    title: '同声传译',
    appid: 'wxa1fdf598239935d7',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666881024970-assets/web-upload/ce66dc47-d34f-499b-ab19-8253d5115f2c.jpeg',
    title: '超多语言',
    appid: 'wx59376c14388a2165',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1679214581056-assets/web-upload/49298d50-78e1-4466-a01c-e3b4249adebb.jpeg',
    title: '拍照翻译',
    appid: 'wxa1fdf598239935d7',
    path: '',
  },
]
onReady(() => {})
onPageScroll((e) => {})
const show = ref<boolean>(false)
const selectGrade = uni.getStorageSync('gradeData') || {name:'请选择'}
const handleShow = () => {
  show.value = true
}
const handleSelectGrade = (item:any) =>{
	uni.setStorageSync('gradeData', item);//将名字存入缓存
	selectGrade.name = item.name;
	show.value = false;
}
</script>

<template>
  <TnNavbar
    fixed
    bg-color="transparent"
    :bottom-shadow="false"
    :placeholder="false"
    title="续费"
    @init-finish="navbarInitFinishHandle"
    style="display: flex; align-items: center"
  >
    <template #back>
      <view
        class="logo-pic tn-shadow-blur tn-flex tn-flex-center"
        @click="handleShow"
      >
        <view class="logo-image tn-flex">
          <view>{{selectGrade.name}}</view>
          <TnIcon name="right" />
        </view>
      </view>
    </template>
    <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
      <view class="tn-flex tn-flex-col-center">
        <text class="tn-text-xl tn-color-black">语境佳</text>
        <text
          class="tn-icon-down-triangle tn-color-white tn-padding-left-xs"
          style="opacity: 0.3"
        ></text>
      </view>
    </view>
  </TnNavbar>
  <!--
	 -->
  <!-- 作者信息弹框 -->
  <TnPopup
    v-model="show"
    radius="30"
    open-direction="top"
    :top="navBarInfo.height + 12"
  >
    <!-- :style="{ paddingTop: `${navBarInfo.height + 12}px` }" -->
    <view class="">
      <scroll-view
        scroll-y="true"
        style="max-height: 45vh; max-width: 640px; margin: 0 auto"
      >
        <view>
          <view
            class="tn-flex tn-flex-col-center"
            style="margin: 20rpx 20rpx"
            v-for="(item, index) in gradeList"
            :key="index"
          >
            <view class="tn-padding-left-sm" style="width: 100%">
              <view class="tn-flex tn-flex-row-between tn-flex-col-between">
                <view class="justify-content-item" @click="handleSelectGrade(item)">
                  <text class="oa-black tn-text-lg">{{item.name}}</text>
                </view>
              </view>
              <view class="tn-padding-top-xs tn-text-ellipsis">
                <text
                  class="tn-color-gray tn-text-sm tn-icon-trusty-fill"
                ></text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </TnPopup>
  <!-- 顶部背景 -->
  <view class="top-bg" />
  <!-- 页面内容 -->
  <!-- :style="{ paddingTop: `${navBarInfo.height + 12}px` }" -->
  <view class="page">
    <view class="top-backgroup">
      <image
        src="https://resource.tuniaokj.com/images/oa/aa7.jpg"
        mode="widthFix"
        class="backgroud-image"
      >
      </image>
    </view>
    <view
      style="margin-top: -93px; position: relative; text-align: center"
      class="tn-color-white tn-text-xxl"
    >
      欢迎使用语境佳</view
    >
    <!-- 关于我们 -->
    <view class="about" style="padding: 0rpx 30rpx">
      <Title title="关于我们">
        <template #operation>
          <view />
        </template>
      </Title>
      <view class="content-wrapper">
        <view
          class="content-item tn-bg-image tn-shadow-blur tn-gradient-bg__blue"
          @tap.stop="tnNavPage('/home-page/typeStudy/dialogue/index')"
        >
          <view class="left">
            <view class="title">场景练习</view>
            <view class="show-more">
              <text>现在就来练习吧</text>
              <TnIcon name="right" />
            </view>
          </view>
          <view class="icon">
            <TnIcon name="image-text-fill" />
          </view>
        </view>
        <view
          class="content-item tn-bg-image tn-shadow-blur tn-gradient-bg__cyan"
          @tap.stop="tnNavPage('/home-page/sceneTeaching/dialogue/index')"
        >
          <view class="left">
            <view class="title">达人对话</view>
            <view class="show-more">
              <text>现在就来聊聊吧</text>
              <TnIcon name="right" />
            </view>
          </view>
          <view class="icon">
            <TnIcon name="calendar-fill" />
          </view>
        </view>
        <view
          class="content-item tn-bg-image tn-shadow-blur tn-gradient-bg__bluepurple"
          @tap.stop="tnNavPage('/home-page/agent/list')"
          style="width: 100%"
        >
          <view class="left">
            <view class="title">话题演讲</view>
            <view class="show-more">
              <text>自定义对话身份及场景</text>
              <TnIcon name="right" />
            </view>
          </view>
          <view class="icon">
            <TnIcon name="image-fill" />
          </view>
        </view>
        <!-- <view
          class="content-item tn-bg-image tn-shadow-blur tn-gradient-bg__purple"
          @tap.stop="tnNavPage('/home-page/homophonic/index')"
        >
          <view class="left">
            <view class="title">同声直译</view>
            <view class="show-more">
              <text>查看详情</text>
              <TnIcon name="right" />
            </view>
          </view>
          <view class="icon">
            <TnIcon name="theme-fill" />
          </view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import './styles/index.scss';
</style>
